<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../css/log/log-common.css"/>
    <link rel="stylesheet" href="../../css/public/jquery.cropbox.css"/>
    <script src="../../js/libs/jquery.min.js"></script>
    <script src="../../js/libs/hammer.min.js"></script>
    <script src="../../js/libs/jquery.cropbox.js"></script>
    <script src="../../js/mui.min.js"></script>
    <style type="text/css">
    	.cropFrame {
	    	z-index: 100;
	    }
	  	.bg {
	  		width: 200px;
	  		height: 200px;
	  		position: absolute;
	  		top: 0;left: 0;
	  		opacity: 0.4;
	  		z-index: 99;
	  	}
	    .container {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
	    .porel {position: relative;width: 100%;height: 100%;}
	    .inner-wrap {
	    	width: 200px;
			height: 200px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -100px;
			margin-top: -100px;
	    }
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-arrowthinleft mui-pull-left"></a>
		<h1 class="mui-title mui-text-left">选取头像</h1>
	</header>
	
	<div class="container">
		<div class="porel">
			<div class="inner-wrap">
				<div class="bg" id="shadow">
					<img src="" id="shadow-img" width="100%"/>
				</div>
				<img class="cropimage" id="headimg" alt="" src="" cropwidth="200" cropheight="200"/>
			</div>
		</div>
	</div>
	
	
	<script>
      	mui.init();
      	mui.plusReady(function(){
      		$headimg = $("#headimg")
      		$headimg.attr("src", "../../img/log/logo.png");
      		$headimg.on("load", function(){
      			console.log("加载成功")
      		})
      	})
    </script>
</body>
</html>